<template>
  <!-- 搜索页面 -->
  <div>

    <div class="" style="padding-top: 20px; width: 1100px; margin-left: 200px">
      <!-- 图标 -->
      <div>
        <img
          style="width: 140px; height: 50px"
          src="../../static/logo.png"
          alt=""
        />
      </div>

      <div style="display: flex; justify-content: center">
        <el-input
          autofocus="true"
          style="width: 400px"
          v-model="searchData.name"
          type="string"
          placeholder="请输入内容"
        >
        </el-input>
        <!-- 搜索按钮 -->
        <a href="javascript:void(0)" @click="searchHandel"
          style="
            width: 60px;
            height: 30px;
            background-color: #c91424;
            color: white;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
          "
          >搜索</a
        >
      </div>

      <!-- 分类表格 -->
      <div style="padding-top: 40px;">
        <div style="display:flex;align-items: center;font-size: 14px;">
          <div ><span style="">选择分类:</span></div>
          <div v-for="value,index in pluseData" :key="index" style="">
          <div   style="border: 1px solid #999999;font-size: 12px;margin-left: 20px;">

              <span style="">{{value.type}}:</span>
            <span style="color:red;padding-left: 5px;padding-right: 10px;">{{ value.data}} </span>

            <i @click="deleteData(index)" style="color:red;font-weight: bold;" class="el-icon-close"></i>

          </div>
        </div>
        </div>
        <div class="shadow-bg" style="">
           <div  v-for="item,index in categoryData" :key="index" style="display: flex;align-items: center;border-bottom: 1px solid #ccccccb3;">
            <div style="width: 150px;height: 40px;display: flex;align-items: center;justify-content: center;border-right: 1px solid #ccccccb3;"><strong>{{ item.type }}</strong></div>
            <div style="font-size: 12px;color: #dddddd;display: flex; gap: 20px;padding-left: 20px;">

              <a href="javascript" onclick="return false;" v-for="items,indexs in item.data" :key="indexs"  @click="selectCategory(index,indexs)">{{ items }}</a>
            </div>
          </div>
        </div>

       <!-- 搜索到的图片内容 -->
        <div>
          <Items :imgList="imgList"></Items>
        </div>

      </div>
    </div>
  </div>
</template>

<script>

import Items from './items/index.vue'
import { getItems } from '@/api/item'
export default {
  components: { Items },

  data () {
    return {
      // 查询的数据
      searchData: {
        name: '', // 搜索关键字
        category: '', // 商品分类
        brand: '', // 品牌
        minPrice: '', // 价格最小值
        maxPrice: '' // 价格最大值
      },

      imgList: [],

      // 搜索分类数组
      categoryData: [
        { type: '分类', data: ['手机', '曲面电视', '拉杆箱', '休闲鞋', '真皮包'] },
        { type: '品牌', data: ['希捷', '小米', '华为', 'oppo', '三星', '西部数据', '意尔康', '一加', 'vivo'] },
        { type: '价格', data: ['100元以下', '100~299元', '300~599元', '600~899元', '900~1599元', '1999元以上'] }
      ],
      indexToDelete: [], // 存储删除后的数组
      // 添加数组
      pluseData: []

    }
  },
  created () {
    this.searchData.name = this.$route.query.search
    this.searchHandel()
  },
  methods: {
    // 查询分类
    selectCategory (index, indexs) {
      const cateDta = {
        type: '',
        data: ''
      }
      this.searchData.name = ''

      cateDta.type = this.categoryData[index].type
      cateDta.data = this.categoryData[index].data[indexs]

      if (cateDta.type === '分类') {
        this.searchData.category = cateDta.data // 添加分类商品数据
      }
      if (cateDta.type === '品牌') {
        this.searchData.brand = cateDta.data // 添加品牌数据
      }

      if (cateDta.type === '价格') {
        const numbers = cateDta.data.match(/\d+/g).map(Number)
        const [minPrice, maxPrice] = numbers
        this.searchData.minPrice = minPrice
        this.searchData.maxPrice = maxPrice
      }
      console.log(cateDta)
      this.pluseData.push(cateDta)

      // this.categoryData.shift(index) // 从前往后删除
      // this.indexToDelete.slice(this.categoryData.splice(index, 1)[0])

      this.indexToDelete.push(this.categoryData.splice(index, 1)[0]) // 添加
    },
    // 删除
    deleteData (index) {
      this.indexToDelete.forEach(item => {
        if (item.type === this.pluseData[index].type) {
          console.log(item.type, 'item.type')

          if (item.type === '分类') {
            this.categoryData.splice(0, 0, item)
          }
          if (item.type === '品牌') {
            this.categoryData.splice(1, 0, item)
          }
          if (item.type === '价格') {
            this.categoryData.splice(1, 0, item)
          }
        }
      })

      // 排除选中的数据
      this.pluseData = this.pluseData.filter((_, i) => i !== index)

      // catetoryData数组去重
      this.categoryData = [...new Set(this.categoryData)]
    },

    /* 按条件查询 */

    async searchHandel () {
      console.log(this.searchData, 'this.indexToDelete')
      const res = await getItems(this.searchData)
      this.imgList = res.data
      console.log(res)
    }

  }
}
</script>

<style lang="less" scoped>

::v-deep .el-input__inner {
  height: 30px;
  border-radius: 0 0 0 0; //去掉圆弧
  border-right: none;
  border-left: 2px solid #c91424;
  border-top: 2px solid #c91424;
  border-bottom: 2px solid #c91424;
}

// 鼠标悬停时改变input边框的颜色
::v-deep .el-input__inner:hover {
  border-color: #c91424 !important;
}
// 鼠标聚焦后悬停时改变input边框的颜色
::v-deep .el-input__inner:focus,
.el-input__inner:focus:hover {
  border-color: #c91424 !important;
}

/* 阴影背景 */
.shadow-bg {
  background: white;
  border-radius: 5px;
  border-left: 1px solid #ccccccb3;
  border-right: 1px solid #ccccccb3;
  border-top: 1px solid #ccccccb3;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);

}
</style>
